<template>
  <div class="search-music-list">
    <div class="tip">找到{{ musicListCount }}个歌单</div>
    <list-card
      :listCardData="searchMusicList"
      @clickListCardItem="clickListCartItem"
    ></list-card>
    <!--    分页-->
    <div class="page" v-if="searchMusicList.length!==0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="musicListCount"
        small
        :page-size="30"
        :current-page="currentPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
import ListCard from "../../../../components/ListCard/ListCard";

export default {
  name: "searchMusicList",
  data() {
    return {
      //歌单总数
      musicListCount: 0,
      //歌单数据
      searchMusicList: [],
      //  当前页
      currentPage: 1
    }
  },
  methods: {
    //点击歌单的回调
    clickListCartItem(id) {
      /*
      点击时回调，跳转到musicListDetail页面
       */
      console.log(id)
     this.$router.push({ name: "musicListDetail", params: { id } });
      // this.$router.push({name:"musiclistdetail",params:{id}})

    },
  //  分页回调
    pageChange(page){
      //点击页获取
      this.currentPage = page;
      //获取点击页切换时，清空原有数据
      this.searchMusicList = [];
      //再次获取
      this.GetSearchMusicList();
    },
  //  获取搜索歌曲歌单
    async GetSearchMusicList(){
            /*
      可选参数 : limit : 返回数量 , 默认为 30 offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30,
      其中 30 为 limit 的值 , 默认为 0
      type: 搜索类型；默认为 1 即单曲 ,
      取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV,
      1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
       */
      let res = await this.$request('/cloudsearch', {
        keywords: this.$route.params.id,
        offset:(this.currentPage-1)*30,
        type:1000
      })
      console.log(res)
      //歌单总数
      this.musicListCount = res.data.result.playlistCount;
      //歌单列表
      this.searchMusicList = res.data.result.playlists
    },
  },
  created() {
    this.GetSearchMusicList();

  },
  components: {
    //渲染歌单的组件
    ListCard,
  }
}
</script>

<style scoped lang="less">
.search-music-list{
  max-width: 1000px;
  margin: auto;
  .tip {
    text-align: left;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-bottom: 10px;
}

.page {
  width: 100%;
    font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
  margin: 20px 0;
}
}

</style>
